<template>
  <div class="container">
    <div class="header-box">
        <h3><span>整编规则</span></h3>
        <div class="collapse-box">
            <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                  <template slot="title">
                    <i class="header-icon el-icon-folder"></i> 智能查重合并
                  </template>
                  <el-collapse class="collapse2" v-model="activeNames2">
                    <el-collapse-item name="1-1">
                        <template slot="title">
                          <i class="header-icon el-icon-document"></i> 合并为产品：按规格型号、品牌、参考号为比对特征字段，计算相似度。
                        </template>
                         <ul>
                            <li><span><i class="el-icon-document"></i>特征字段:</span><el-tag size="small" type="success" closable>规格型号</el-tag><el-tag size="small" type="success" closable>品牌</el-tag><el-tag size="small" type="success" closable>参考号</el-tag><el-tag type="info" size="small" ><i class="el-icon-plus"></i></el-tag></li>
                            <li><span><i class="el-icon-document"></i>计算方式:</span><el-tag size="small" type="success" closable>BM25</el-tag><el-tag type="info" size="small" ><i class="el-icon-plus"></i></el-tag></li>
                            <li><span><i class="el-icon-document"></i>计算阈值:</span><el-tag size="small" type="success" closable>90%</el-tag><el-tag type="info" size="small" ><i class="el-icon-plus"></i></el-tag></li>
                            <li><span><i class="el-icon-document"></i>比对权重:</span><span>规格型号</span><el-input size="mini" placeholder="60%" v-model="input4"></el-input><span>品牌</span><el-input size="mini" placeholder="40%" v-model="input4"></el-input><span>参考号</span><el-input size="mini" placeholder="100%" v-model="input4"></el-input></li>
                          </ul>
                      </el-collapse-item>
                      <el-collapse-item name="1-2">
                        <template slot="title">
                          <i class="header-icon el-icon-document"></i> 合并为品种：按特征名称、关联主属性和次属性完全一致
                        </template>
                          <ul>
                            <li><span><i class="el-icon-document"></i>特征字段:</span><el-tag size="small" type="success" closable>基准名称</el-tag><el-tag size="small" type="success" closable>关联主属性</el-tag><el-tag size="small" type="success" closable>关联次属性</el-tag><el-tag type="info" size="small" ><i class="el-icon-plus"></i></el-tag></li>
                            <li><span><i class="el-icon-document"></i>计算方式:</span><el-tag size="small" type="success" closable>精准匹配</el-tag><el-tag type="info" size="small" ><i class="el-icon-plus"></i></el-tag></li>
                            <li><span><i class="el-icon-document"></i>计算阈值:</span><el-tag size="small" type="success" closable>100%</el-tag><el-tag type="info" size="small" ><i class="el-icon-plus"></i></el-tag></li>
                            <li><span><i class="el-icon-document"></i>比对权重:</span><span>不适用</span></li>
                            <!-- <li><span><i class="el-icon-document"></i>比对权重:</span><span>基准名称</span><el-input size="mini" placeholder="100%" v-model="input4"></el-input><span>关联主属性</span><el-input size="mini" placeholder="40%" v-model="input4"></el-input><span>关联次属性</span><el-input size="mini" placeholder="100%" v-model="input4"></el-input></li> -->
                          </ul>
                      </el-collapse-item>
                  </el-collapse>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template slot="title">
                    <i class="header-icon el-icon-folder"></i> 智能归类
                  </template>
                  <el-collapse class="collapse2" >
                    <el-collapse-item>
                        <template slot="title">
                          <i class="header-icon el-icon-folder"></i> 关键字比对：和全部分类下产品关键字进行比对，比对相似度大于90%为同一类产品
                        </template>
                      </el-collapse-item>
                      <el-collapse-item>
                        <template slot="title">
                          <i class="header-icon el-icon-folder"></i> 自动映射：自动根据分类映射关系归类
                        </template>
                      </el-collapse-item>
                  </el-collapse>
                </el-collapse-item>
                <el-collapse-item name="3">
                  <template slot="title">
                    <i class="header-icon el-icon-folder"></i> 智能映射基准名称
                  </template>
                </el-collapse-item>
            </el-collapse>
        </div>
        
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'rule',
  data() {
      return {
        activeNames: ['1'],
        activeNames2: ['1-1','1-2'],
        input4:''
       
      }
   }
}
</script>
<style lang="scss">
i.el-collapse-item__arrow{
  margin: 0;
  position: absolute;
  left: 20px;
}
.el-collapse{
  border:none;
}
.collapse2{
  
  i.el-collapse-item__arrow{
    left: 50px;
  }
  .el-input{
    width: 80px;
    margin:0 10px;
  }
  .el-collapse-item__wrap{
    border-bottom:none;
  }
}
</style>
<style lang="scss" scoped>
.header-box{
  height: 100%;
}
.collapse-box{
    padding: 10px 20px;
    i.header-icon{
      margin-right: 5px;
      margin-left: 20px;
    }
    
    ul{
        margin: 0;
        li{
            display: inline-block;
            width: 23%;
            font-size: 12px;
            color: #666;
            line-height: 30px;
        }
    }
    .el-tag{
        margin-right: 5px;
    }
}
.collapse2{
  padding-left: 30px;
  ul{
      padding: 0;
      padding-left: 30px;
      li{
          display: block;
          width: auto;
          margin-bottom: 5px;
          span:first-child{
              display: inline-block;
              width: 80px;
              text-align: left;
              margin-right: 5px;
              i{
                margin-right: 5px;
              }
          }
          
      }
  }
}
</style>
